/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>新增文章时，可选择文章分类。文章分类将在前台文章列表页显示</li>
          <li>ID前10的为系统分类，不可以删除</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <div class="mDiv">
      <div class="ftitle">
        <h3>帮助分类列表</h3>
      </div>
      <div class="fbutton">
        <div class="add" @click="toAdd()">
          <span>
            <i class="el-icon-circle-plus" /> 新增分类
          </span>
        </div>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="type_id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="type_name" label="分类名称" width="200"></el-table-column>
      <el-table-column label="排序" width="200">
        <template slot-scope="scope">
          <el-input
            class="sort-input"
            size="mini"
            v-model="scope.row.sort_order"
            @change="update(scope.row, false)"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="3"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="150">
        <template slot-scope="scope">
          <div :class="scope.row.is_show == 1?'yes':'no'" @click="update(scope.row, true)">
            <i :class="scope.row.is_show == 1?'fa fa-check-circle':'fa fa-ban'"></i>
            <span v-text="scope.row.is_show == 1?'是':'否'"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              v-if="scope.row.level < 1"
              size="small"
              @click="toAddChildren(scope.row.type_id)"
              icon="el-icon-plus"
            >新增下级</el-button>
            <el-button
              size="small"
              @click="toEdit(scope.row.type_id)"
              icon="el-icon-edit-outline"
            >编辑</el-button>
            <el-button size="small" @click="remove(scope.row)" icon="el-icon-delete">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="20%"
      center
      :modal-append-to-body="false"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="分类名称" required>
          <el-input v-model="form.type_name" size="mini"></el-input>
          <p class="err-msg" v-if="errResult.type_name && !form.type_name">{{errResult.type_name}}</p>
        </el-form-item>
        <el-form-item label="上级分类">
          <el-select v-model="form.pid" size="small" placeholder="顶级分类" clearable>
            <el-option
              v-for="item in helpTypes"
              :key="item.type_id"
              :label="item.type_name"
              :value="item.type_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="form.is_show" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort_order" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit()" :loading="isLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getHelpTypeList,
  updateHelpType,
  deleteHelpType,
  getHelpType,
  getHelpTypes,
  addHelpType
} from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      form: {
        pid: 0
      },
      dialogFormVisible: false,
      dialogTitle: "新增分类",
      helpTypes: [
        {
          type_id: 0,
          type_name: "顶级分类"
        }
      ],
      isLoading: false,
      errResult: {}
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    getTree() {
      var that = this;
      getHelpTypeList().then(function(res) {
        that.tableData = res;
      });
    },
    refresh() {
      this.getTree();
      this.$message.success("刷新成功！");
    },
    update(row, isShow) {
      if (isShow) {
        row.is_show = row.is_show == 0 ? 1 : 0;
      }
      var that = this;
      updateHelpType(row).then(function(res) {
        if (res.status == 1) {
          that.$message.success("更新成功");
          that.getTree();
        } else {
          this.$message.error("更新失败");
        }
      });
    },
    remove(row) {
      var that = this;
      this.$confirm("是否删除 " + row.type_name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteHelpType(row.type_id).then(function(res) {
            if (res.status == 1) {
              that.getTree();
              that.$message.success("删除成功!");
            } else {
              that.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          that.$message.info({
            message: "已取消删除"
          });
        });
    },
    getHelpTypeForm(typeId) {
      var that = this;
      getHelpType(typeId).then(function(res) {
        res.is_show = String(res.is_show);
        that.form = res;
      });
    },
    getHelpTypes() {
      var that = this;
      getHelpTypes().then(function(res) {
        if (res.msg) {
          that.$message.error(res.msg);
        } else {
          that.helpTypes.splice(1);
          that.helpTypes = that.helpTypes.concat(res);
        }
      });
    },
    toAdd() {
      this.getHelpTypes();
      this.form = {
        pid: 0
      };
      this.dialogTitle = "新增分类";
      this.dialogFormVisible = true;
    },
    toAddChildren(typeId) {
      this.getHelpTypes();
      this.dialogTitle = "新增分类";
      this.dialogFormVisible = true;
      this.form = {
        pid: typeId
      };
    },
    toEdit(typeId) {
      this.getHelpTypes();
      this.getHelpTypeForm(typeId);
      this.dialogTitle = "编辑分类";
      this.dialogFormVisible = true;
    },
    onSubmit() {
      this.isLoading = true;
      var that = this;
      if (this.form.type_id) {
        //编辑
        updateHelpType(this.form).then(function(res) {
          if (res.status == 1) {
            that.$message.success("保存成功");
            that.getTree();
            that.dialogFormVisible = false;
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.isLoading = false;
        });
      } else {
        //添加
        addHelpType(this.form).then(function(res) {
          if (res.status == 1) {
            that.$message.success("添加成功");
            that.getTree();
            that.dialogFormVisible = false;
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.isLoading = false;
        });
      }
    }
  }
};
</script>

<style scoped>
>>> .el-input .el-input__inner {
  width: 200px;
}
>>> .sort-input .el-input__inner {
  width: 60px;
}
</style>
